<template>
  <div class="x-menu" :style="show ? { borderRadius: '14px 14px 0 0' } : {}">
    <div class="title" @click="show = !show">
      <span>{{ title }}</span>
      <img src="/images/down.svg" />
    </div>
    <div class="body" v-show="show" @click="show = false">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'x-select',
    props: ['title'],
    data() {
      return { show: false }
    },
  }
</script>

<style lang="scss" scoped>
  @import '../config.scss';
  .x-menu {
    display: inline-block;
    position: relative;
    border-radius: $border-radius;
  }
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 166px;
    height: 46px;
    padding: 12px 17px;
    // border-radius: $border-radius;

    span {
      color: rgba(10, 22, 41, 1);
    }
  }
  .body {
    z-index: 999;
    position: absolute;
    display: flex;
    padding: 8px 6px;
    flex-direction: column;
    border-top: 1px solid rgba(230, 235, 245, 1);
    align-items: center;
    background: #fff;
    border-radius: 0 0 $border-radius $border-radius;
  }
</style>
